<template>
    <!-- <div class="content-list"> -->
    <div >
        <!-- 电影展示组件 start -->
        <div class="film-item" v-for="film in list" :key="film.filmId">
            <div class="film-img" :style=" `background-image: url(${film.filmImg})` " @click="sendDetail(film.filmId)"></div>
            <div class="film-title">{{film.filmName}}</div>
            <div class="film-source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <span class="star-source">{{film.source | getSource}}</span>
            </div>
        </div>
        <!-- 电影展示组件 end -->
    </div>
</template>
<script>
    var filmList = Vue.extend({
        template: document.currentScript.ownerDocument.querySelector("template"),
        props: {
            list: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        filters:{
            getSource(source) {
                return (source * 1).toFixed(1);
            }
        },
        methods:{
            sendDetail(id){
                // console.log(id);
                this.$root.$emit("update:detail",id,'FilmDetail');
            }
        }
    })
</script>